<template>
  <div>
      <div class="back-up"></div>
      <div class="contents">
        <div class="moduleContent">
            <Navigation :logoName="logoName"></Navigation>
            <div class="formContent">
              <h3 class="titleselect">选择仲裁员</h3>
                <div class="show">
                    <div class="singleArbitrator" @click="selectArbitrator(index)" v-for="(arbitrator,index) in arbitrators" :key="index">
                        <div :class="{single:true,selected:active===index}">
                          <!-- <div class="left"><img :src="arbitrator&&arbitrator.headurl"/></div> -->
                          <div class="right">
                            <h3>{{arbitrator&&arbitrator.name}}</h3>
                            <p>职位：<span>{{arbitrator&&arbitrator.position}}</span></p>
                            <p>单位：<span>{{arbitrator&&arbitrator.company}}</span></p>
                            <p>擅长领域：<span>{{arbitrator&&arbitrator.expertise}}</span></p>
                            <p class="desc">个人简介：<span>{{arbitrator&&arbitrator.desc}}</span></p>
                          </div>
                        </div>
                        
                    </div>
                </div>
                <div class="btn-sty">
                  <span class="btn btn-apply" @click="back">返回</span>
                  <span class="btn btn-complete" @click="confirm">确认选择</span>
                </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Navigation from './common/navigation'
export default {
  name: 'SelectArbitrator',
  data(){
     return {
        logoName:'仲裁通知书',
        active:0,
        arbitrators:[]
     }
  },
  props: {
    msg: String
  },
  methods:{
    back(){
      if(this.$route.params.res=='1'){  //被申请人
        this.$router.push({name:'verifyApplyedNotice',params:{userid:this.$route.params.userid}})
      }else if(this.$route.params.res=='2'){   //申请人
        this.$router.push({name:'verifyApplyNotice',params:{userid:this.$route.params.userid}})
      }
      
    },
    selectArbitrator(param){
        this.active=param
    },
    confirm(){
      if(this.active||this.active==0){
        if(this.$route.params.res=='1'){  //被申请人
           this.$store.dispatch('changeResInfo',this.arbitrators[this.active])
           this.$router.push({name:'verifyApplyedNotice',params:{userid:this.$route.params.userid}})
        }else if(this.$route.params.res=='2'){  //申请人
           this.$store.dispatch('changeapplyInfo',this.arbitrators[this.active])
           this.$router.push({name:'verifyApplyNotice',params:{userid:this.$route.params.userid}})
        }
        
      }else{
        this.$Message.warning('仲裁员不能为空');
      }
    }
  },
  components:{
    Navigation
  },
  created(){
    console.log(this.$route.params)
    this.$http.post('/api2'+this.urls.getArbitrators+'?uid='+'').then((result)=>{
        if(result.data.code==200&&result.data.data.arbitrators.length>0){
            this.arbitrators=result.data.data.arbitrators;
        }
    }) 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .show{
    margin:0 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .back-up{
    height: 414px; 
    width: 1920px;
    background: #08112c;
  }
  .contents{
    position: absolute;
    top: 0;
    /* width: 100%; */
    width: 1862px;
    margin: 0 auto;
    padding: 0 0 0 30px;
    /* padding: 0 30px; */
    /* height: 800px; */
    /* background: #607d8b5e; */
    background-clip: content-box;

  }
  h3{
    font-weight: 600;
    color: #000;
  }
  .titleselect{
    padding: 20px 0 0 20px;
  }

  .singleArbitrator{
    width: 33%;
    height: 250px;
    margin-top: 30px;
    cursor: pointer;
  }

  .single{
    display: flex;
    margin-right:70px;
    padding: 4px;
    overflow-y: auto;
    height:270px;
  }

  .selected{
    border:2px solid #2e37cb;
  }

  /* .left{
    width: 130px;
    height: 150px;
    border: 1px solid;
  } */
  p{
    line-height: 22px;
  }
  /* .left img{
    width: 100%;
    height: 150px;
    object-fit: cover;
  } */
  .desc{
    height: 146px;
  }
  .right{
    flex: 1;
    /* margin-right: 350px; */
    margin-left: 14px;
    overflow-y:auto;
    /* border: 1px solid; */
  }
  
  .btn-sty{
    position: fixed;
    left: 50%;
    bottom: 162px;
    margin-left: -170px;
    /* text-align: center;
    margin-top: 82px; */
  }
</style>
